<template>
	<view class="">
		<!-- 导航栏 -->
		<view class="cu-bar fixed" :style="'padding-top:'+StatusBar + 'px;background:' + CustomBarBackground">
			<!-- #ifdef MP -->
			<!-- 搜索框 start -->
			<view class="cu-bar search">
				<view class="padding-left round text-xxl text-white"><text class="cuIcon-scan"></text></view>
				<view class="search-form round">
					<text class="cuIcon-search"></text>
					<input type="text" placeholder="搜索图片、文章、视频" confirm-type="search"></input>
				</view>
			</view>
			<!-- 搜索框 end -->
			<!-- #endif -->
			<!-- #ifdef H5 -->
			<view class="cu-bar search" style="width:100%;">
				<view class="padding-left round text-xxl text-white"><text class="cuIcon-scan"></text></view>
				<view class="search-form round">
					<text class="cuIcon-search"></text>
					<input type="text" placeholder="搜索图片、文章、视频" confirm-type="search"></input>
				</view>

				<view class="padding-right round text-xxl text-white" @click="navigateTo">
					<text class="cuIcon-message"></text>
					<view class="cu-tag badge bg-yellow">1</view>
				</view>
			</view>
			<!-- #endif -->
		</view>

		<!-- 轮播图开始 -->
		<view class="" :style="'height:'+CustomBar + 'px'"></view>
		<view>
			<swiper class="screen-swiper" :class="dotStyle?'square-dot':'round-dot'" :indicator-dots="true" :circular="true"
			 :autoplay="true" interval="5000" duration="500" @change="swiperChange">
				<swiper-item v-for="(item,index) in bannerItems" :key="index">
					<image class="align-middle" :src="baseUrl + item.image" mode="aspectFill"></image>
					<video :src="item.url" autoplay loop muted :show-play-btn="false" :controls="false" objectFit="cover" v-if="item.type=='video'"></video>
				</swiper-item>
			</swiper>
		</view>
		<!-- 轮播图结束 -->

		<!-- 分类 start -->
		<view class="cu-list grid no-border" :class="['col-' + gridCol]">
			<view class="cu-item align-center" style="width: 25%;" v-for="(item,index) in cateItems" :key="index" v-if="index<gridCol*2">
				<navigator :url="item.description" hover-class="none" :open-type="item.keywords ? item.keywords : 'navigate'">
					<view class="cu-avatar bg-white" :style="[{ backgroundImage:'url(' + baseUrl + item.image + ')' }]"></view>
					<text class="padding-top-xs">{{item.name}}</text>
				</navigator>
			</view>
		</view>
		<!-- 分类 end -->
		<image class="response align-middle" src="../../static/images/active.jpg" mode="widthFix"></image>
		<!-- 活动版块 start -->
		<view class="bg-white">
			<view class="cu-bar">
				<view class="action title-style-3">
					<text class="text-xl text-bold text-red text-shadow"><text>限时优惠</text></text>
					<text class="text-sm text-gray self-end margin-left-sm"><text>限时促销单品，优`惠多多！</text></text>
				</view>
			</view>

			<view class="cu-card">
				<view class="cu-item active-section">
					<view class="text-white flex justify-between align-center padding">
						<view><text class="text-lg text-bold">小卖部年终大促啦</text>
							<view class="text-sm">月销量8.3万件</view>
						</view>
						<view class="action text-lg"><text class="cuIcon-right"></text></view>
					</view>

					<view class="cu-list grid col-3 margin-lr-xs margin-bottom-xs radius">
						<navigator :url="'/pages/goods/view?id=' + item.id" hover-class="none" :class="index == 0 || index == 1 ? 'solids-right' : ''"
						 v-for="(item,index) in benefitItems" :key="index">
							<view class="active-tag text-white">{{index}}</view>

							<view class="padding-tb">
								<image class="index-image radius" :src="baseUrl + item.image" mode="aspectFit"></image>
							</view>
							<view class="padding-lr-sm padding-bottom-sm text-left">
								<view class="padding-bottom-xs text-sm title text-cut">{{item.goods_name}}</view>
								<view class="cu-tag radius sm text-red line-red">每100-30</view>
								<view class="padding-top-sm">
									<text class="cu-tag radius sm bg-red text-white">特价</text>
									<text class="text-price text-red padding-left-xs">{{item.spec[0].goods_price}}</text>
								</view>
							</view>
						</navigator>
					</view>
				</view>
			</view>
		</view>
		<!-- 活动版块 end -->
		<!-- 热门榜单开始 -->
		<view class="active-section">
			<view class="cu-bar padding-tb-sm">
				<view class="flex flex-direction align-start">
					<view class="action title-style-3">
						<text class="text-xl text-bold text-shadow text-white">热门榜单</text>
					</view>
					<text class="text-Abc text-sm self-end margin-left text-white">榜单根据销量、搜索、好评等组合得出</text>
				</view>
				<view class="padding-right text-white">更多<text class="cuIcon-right"></text></view>
			</view>
			<view class="cu-card ">
				<view class="cu-item bg-white padding-top-sm">
					<!-- <view class="flex padding-left-sm padding-right-sm">
						<view class="flex flex-direction align-center" v-for="(item,index) in hotItems" :key="index">
							<navigator hover-class="none" :url="'/pages/goods/view?id=' + item.id">
								<image class="index-image radius" :src="baseUrl + item.image" mode="aspectFill"></image>
								<view class="padding-sm">
									<view class="title text-cut">{{item.goods_name}}</view>
									<text class="text-price text-red text-bold text-lg">599</text>
								</view>
							</navigator>
						</view>
					</view> -->

					<view class="cu-list grid col-3 radius">
						<view :class="index == 0 || index == 1 ? 'solid-right' : ''" v-for="(item,index) in hotItems" :key="index">
							<navigator hover-class="none" :url="'/pages/goods/view?id=' + item.id">
								<image class="index-image radius" :src="baseUrl + item.image" mode="aspectFill"></image>
								<view class="padding-lr padding-tb-sm text-left">
									<view class="title text-cut text-sm">{{item.goods_name}}</view>
									<text class="text-price text-red text-bold text-lg">599</text>
								</view>
							</navigator>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 热门榜单结束 -->

		<!-- 为你推荐开始 -->
		<view class="">
			<view class="cu-bar bg-white">
				<view class="action sub-title">
					<text class="text-xl text-bold text-shadow text-red">为您推荐</text>
					<text class="text-Abc text-red text-shadow">RECOMMEND</text>
				</view>
				<view class="padding-right text-gray">更多<text class="cuIcon-right"></text></view>
			</view>

			<view class='bg-white solid-bottom padding-bottom-sm padding-top-xs' style="white-space: nowrap;">
				<scroll-view class="scroll-view_x padding-right margin-left-xs" scroll-x style="width:auto;overflow:hidden;">
					<block v-for="(item, index) in recommendItems" :key="index">
						<navigator hover-class="none" :url="'/pages/goods/view?id=' + item.id" class='item margin-left-sm solid' style="display: inline-block;">
							<view class='common-item'>
								<!-- <image class="recommend-item" :src="baseUrl + item.image" mode="aspectFill"></image> -->
								<image class="index-image" :src="baseUrl + item.image" mode="aspectFill"></image>
							</view>
							<view class='title text-sm text-center padding-sm text-cut'>{{item.goods_name}}</view>
						</navigator>
					</block>
				</scroll-view>
			</view>
		</view>
		<!-- 为你推荐结束 -->
		<!-- 新品首发开始 -->
		<view class="bg-white">
			<view class="cu-bar padding-top-sm">
				<view class="flex flex-direction align-start">
					<view class="action title-style-3">
						<text class="text-xl text-bold text-shadow text-red"> 新品首发 </text>
						<text class="text-ABC text-xs text-yellow self-start margin-left-sm">new~</text>
					</view>
					<text class="text-Abc text-sm self-end margin-left">首发新品，快来抢鲜体验！</text>
				</view>
				<view class="padding-right text-gray">更多<text class="cuIcon-right"></text></view>
			</view>
			<view class='solid-bottom padding-bottom-sm padding-top-xs' style="white-space: nowrap;">
				<scroll-view class="scroll-view_x padding-right margin-left-xs" scroll-x style="width:auto;overflow:hidden;">
					<block v-for="(item, index) in newItems" :key="index">
						<navigator hover-class="none" :url="'/pages/goods/view?id=' + item.id" class='item margin-left-sm solid bg-white radius'
						 style="display: inline-block;">
							<view class='common-item1 radius'>
								<!-- <image class="recommend-item" :src="baseUrl + item.image" mode="aspectFill"></image> -->
								<image class="index1-image" :src="baseUrl + item.image" mode="aspectFill"></image>
							</view>
							<view class='new-tilte text-sm text-center padding-xs text-cut'>{{item.goods_name}}</view>
							<view class='text-sm text-center text-red text-bold text-lg text-price padding-bottom-xs'>{{item.spec[0].goods_price}}</view>
						</navigator>
					</block>
				</scroll-view>
			</view>
		</view>
		<!-- 新品首发结束 -->

		<!-- 新人优惠券礼包 -->
		<view class="bg-white padding">
			<view class="padding-sm flex align-center active-section" style="border-radius: 10upx 0 10upx 0;">
				<view class="text-white text-xsl"><text class="cuIcon-presentfill"></text></view>
				<view class="padding-left">
					<view class="text-white text-xl">新人优惠券礼包</view>
					<view class="flex padding-top-sm align-center">
						<view class="text-white">每人限领一份</view>
						<button class="cu-btn sm shadow-blur radius bg-white text-red margin-left-sm">立即领取</button>
					</view>
				</view>
			</view>
		</view>
		<!-- 新人优惠券礼包 -->
		<!-- 精品推荐开始 -->
		<view class="padding-top-sm">
			<view class="cu-bar padding-top-sm bg-white">
				<view class="flex flex-direction align-start">
					<view class="action title-style-3">
						<text class="text-xl text-bold text-shadow text-red">精品推荐</text>
					</view>
					<text class="text-Abc text-sm self-end margin-left"> 发现世间好物，皆是精品! </text>
				</view>
				<view class="padding-right text-gray">更多<text class="cuIcon-right"></text></view>
			</view>
			<swiper class="card-swiper bg-white" :class="dotStyle?'square-dot':'round-dot'" :indicator-dots="true" :circular="true"
			 :autoplay="true" interval="5000" duration="500" indicator-color="#8799a3" indicator-active-color="#0081ff" @change="cardSwiper">
				<swiper-item v-for="(item,index) in bannerBestItems" :key="index" :class="cardCur==index?'cur':''">
					<view class="swiper-item">
						<image :src="baseUrl + item.image" mode="aspectFill"></image>
						<video :src="item.url" autoplay loop muted :show-play-btn="false" :controls="false" objectFit="cover" v-if="item.type=='video'"></video>
					</view>
				</swiper-item>
			</swiper>

			<goods-list :goodsList="bestItems"></goods-list>
		</view>
		<!-- 精品推荐结束 -->
	</view>
</template>

<script>
	import goodsList from '@/components/goods-list/row-list'
	export default {
		components: {
			goodsList
		},
		data() {
			return {
				StatusBar: this.StatusBar,
				CustomBar: this.CustomBar,
				CustomBarBackground: '', // 导航栏背景色
				baseUrl: this.$api.baseUrl,
				dotStyle: true,
				imageUrl: '/static/common.jpg',
				cardCur: 0,
				bannerItems: [], // 轮播图				
				bannerBestItems: [], // 小版块
				cateItems: [], // 分类
				recommendItems: [], // 推荐
				bestItems: [], // 精品
				hotItems: [], //热门
				newItems: [], // 新品
				benefitItems: [], // 优惠
				towerStart: 0,
				direction: '',
				gridCol: 4,
			};
		},
		onLoad() {
			this.$api.index().then((res) => {
				this.CustomBarBackground = res.data.banner[0].keywords;
				this.bannerItems = res.data.banner,
				this.cateItems = res.data.category,
				this.bannerBestItems = res.data.banner_best,
				this.recommendItems = res.data.recommend,
				this.bestItems = res.data.best,
				this.hotItems = res.data.hot,
				this.newItems = res.data.new,
				this.benefitItems = res.data.benefit
			})
		},
		methods: {
			// cardSwiper
			cardSwiper(e) {
				this.cardCur = e.detail.current
			},
			//轮播图切换修改背景色
			swiperChange(e) {
				const index = e.detail.current;
				this.CustomBarBackground = this.bannerItems[index].keywords;
			},
			navigateTo() {
				uni.navigateTo({
					url:'./chat',
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.cu-bar {
		line-height: 1.6em;
	}

	.cu-card>.cu-item {
		margin-top: 0;
	}

	// 消息标签
	.cu-tag.badge {
		top: 20upx;
		right: 20upx;
	}

	.title {
		width: 180upx;
	}

	.new-tilte {
		width: 240upx;
	}

	.benefit-title {
		width: 480upx;
	}

	// .cu-card>.cu-item {
	// 	display: flex;
	// }
	.common-item {
		width: 180rpx;
		height: 180rpx;
		border-radius: 6upx 6upx 0 0;

		image {
			border-radius: 6upx 6upx 0 0;
		}
	}

	.common-item1 {
		width: 240rpx;
		height: 240rpx;

		image {
			border-radius: 6upx 6upx 0 0;
		}
	}

	.index-image {
		width: 180rpx;
		height: 180rpx;
	}

	.index1-image {
		width: 240rpx;
		height: 240rpx;

	}

	.card-swiper {
		height: 340rpx !important;
	}

	.discount-price {
		border-radius: 20rpx 0 20rpx 0;
		width: 240rpx;
		;
	}

	.tower-swiper .tower-item {
		transform: scale(calc(0.5 + var(--index) / 10));
		margin-left: calc(var(--left) * 100upx - 150upx);
		z-index: var(--index);
	}

	// 2019/11/03 修改首页样式
	.active-section {
		background: linear-gradient(to right, #f75023, #fe8767);

		.active-tag {
			dispaly: inline-block;
			position: relative;
			background: #fb6c44;
			line-height: 40upx;
			margin: 0 20upx;
			// padding:20upx;
			width: 40upx;
		}

		.active-tag:before {
			position: absolute;
			content: "";
			width: 0;
			height: 0;
			border: transparent 20upx solid;
			border-top-color: #fb6c44;
			top: 39upx;
			left: 0;

		}
	}

	.align-middle {
		vertical-align: middle;
	}
</style>
